import React, {useState, useEffect, useCallback} from 'react';
import {useMount, useSetState, useUpdateEffect} from 'ahooks';
import {Card, Table, Tooltip, Typography, Row, Col, Spin} from 'antd';
import {QuestionCircleOutlined} from '@ant-design/icons';
import {queryValues} from '~/service/refundReport';
import {addDashBoardIdToDimensionAndValues} from './utils';

const useGetData = props => {
    const {
        dashBoard = {},
        dimensionAndValues = [],
        unitId,
        onUpdateLoading,
        queryFunc,
        pager,
        isMountQuery = false,
    } = props;

    const [loading, setLoading] = useState(false);
    const [result, setResult] = useSetState({});

    /** 更新内部 */
    const updateLoading = flag => {
        setLoading(flag);
        typeof onUpdateLoading === 'function' && onUpdateLoading(flag);
    };

    const getData = () => {
        const {current: pageNum = 1, pageSize = 10} = pager || {};
        const params = {
            dashBoardList: [dashBoard],
            // dimensionAndValues,
            dimensionAndValues: addDashBoardIdToDimensionAndValues(
                dimensionAndValues,
                dashBoard?.dashBoardId
            ),
            pager: {pageNum, pageSize}
        };
        updateLoading(true);
        const queryFn =
            typeof queryFunc === 'function' ? queryFunc : queryValues;
        queryFn(params)
            .then(res => {
                setResult(res);
            })
            .catch(e => {
                console.log(e);
                setResult({});
            })
            .finally(() => {
                updateLoading(false);
            });
    };

    useUpdateEffect(() => {
        getData();
    }, [dimensionAndValues, pager]);

    useMount(() => {
        if (isMountQuery) {
            getData();
        }
    });

    return {data: result?.data ?? {}, loading, pager: result?.pager ?? {}};
};

export default useGetData;
